<template>
  <div class="time-card">
    <div class="title">Time Card</div>
    <Row  class="card-content">
      <i-col class="break-button-icon" span="12">
        <div class="left-wrapper">
          <img v-if="isAm(currentTime)" :src="amImg" class="image-wrapper">
          <img v-if="!isAm(currentTime)" :src="pmImg" class="image-wrapper">
          <div class="card left-card">
            <div class="time-zoom">
              <i class="iconfont time-zoom-icon">&#xe66e;</i><span class="time-zoom-name">{{timeZone}}</span>
            </div>
            <div class="time-show">
              <div class="time-current">{{formatTime(currentTime,'HH:mm')}}</div>
              <div class="date-current clearfix">
                <span class="date">{{formatTime(currentTime,'YYYY-MM-DD')}}</span>
                <span class="day">{{formatTime(currentTime,'ddd')}}</span>
              </div>
            </div>
            <div class="time-location">
              <i class="iconfont time-location-icon">&#xe666;</i>{{location}}
          </div>
          </div>
        </div>
      </i-col>
      <i-col span="12" style="text-align: right">
        <div class="card right-card">
          <div class="title" :class="{'break':clockState==2}">My Time Card <i class="iconfont setting-icon" @click="showSetting = !showSetting">&#xe66c;</i></div>
          <div class="content">
            <div class="clock-record">You {{clockState == 1?'clocked in':'clocked out'}} at
              <span class="time" v-if="lastClockInTime">{{formatTime(lastClockInTime,'HH:mm')}}</span>
              <span class="time" v-else>---</span>
            </div>
            <div class="total-record">
              <Row>
                <i-col span="8">
                  <div class="key">Current</div>
                  <div class="value">{{formatTotal(currentTotal,'hh:mm:ss') || '---'}}</div>
                </i-col>
                <i-col span="8">
                  <div class="key">Day</div>
                  <div class="value">{{formatTotal(dayTotal,'hh:mm') || '---'}}</div>
                </i-col>
                <i-col span="8">
                  <div class="key">Week</div>
                  <div class="value">{{formatTotal(weekTotal,'hh:mm') || '---'}}</div>
                </i-col>
              </Row>
            </div>
          </div>
          <div class="footer">
            <Row>
              <i-col class="break-button-icon" span="9" offset="2"><button class="break-button" type="button" @click="takeBreak">Take Break</button></i-col>
              <i-col span="9" offset="2">
                <button v-if="clockState == 0 " class="clock-in-button" type="button" @click="clockIn">Clock In</button>
                <button v-if="clockState != 0 "class="clock-out-button" type="button" @click="clockOut">Clock Out</button>
              </i-col>
            </Row>
          </div>

          <!--break List-->
          <div v-if="showBreakType" class="card-dialog">
            <div  v-on-click-away="closeBreakType"  class="card-dialog-content break-list">
              <div class="title">Break Type</div>
              <ul class="list">
                <li class="item" v-for="(item,key ) in breakList" @click="activeBreakItem(item)">
                  <div class="left-item">
                    <div class="name">{{item.breakName}}</div>
                    <div class="time">{{formatTimeLength(item.timeLength,item.timeUnit)}}</div>
                  </div>
                  <div class="right-item">
                    <span class="paid-name" :class="[item.type.toLowerCase()+'-type']">{{item.type}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!--break item-->
          <div v-if="clockState == 2" class="card-dialog">
            <div  v-on-click-away="closeBreakType"  class="card-dialog-content break-item">
              <template v-if="breakObj.isAutoEnd">
                <div class="title">
                  Required Break<br>
                  {{breakObj.timeLength + ' ' + breakObj.timeUnit +' required'}}
                </div>
                <div class="content">
                  <div class="break-interval auto-end">{{formatBreakTime(autoBreakTime)}}</div>
                  <div class="auto-end-name-time">AUTO-ENDS  {{formatBreakTime(autoBreakRemainTime)}}</div>
                </div>
              </template>
              <template v-else>
                <div class="title">{{breakObj.breakName}}</div>
                <div class="content">
                  <div class="total-time">{{breakObj.timeLength}} {{breakObj.timeUnit== 1? 'minutes':'hours'}} </div>
                  <div class="break-interval">{{formatBreakTime(breakObj.running)}}</div>
                  <div class="end-button-content">
                    <button class="end-button" type="button" @click="endBreak">End Break</button>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </i-col>
    </Row>

    <!--setting-->
    <div class="animated fadeIn time-card-setting" v-if="showSetting">
      <div class="bg" @click="showSetting=false"></div>
      <div class="time-card-setting-content">
        <i class="iconfont close-icon" @click="showSetting=false">&#xe61a;</i>
        <div class="title">Setting</div>
        <div class="notification-setting">
          <Row class="title-row">
            <i-col class="name" span="18">Clock in/out notification</i-col>
            <i-col span="3" class="mobile">Mobile<i class="iconfont mobile-icon">&#xe66d;</i></i-col>
            <i-col span="3" class="email">Email<i class="iconfont email-icon">&#xe671;</i></i-col>
          </Row>
          <Row class="title-row-item">
            <i-col  class="notification-name" span="9">Send clock in reminder at</i-col>
            <i-col span="9">
              <Input type="text" style="width: 82px;height: 30px"></Input>
              <Select style="width: 82px;height: 30px" v-model="model2">
                <Option value="1">am</Option>
                <Option value="1">pm</Option>
              </Select>
            </i-col>
            <i-col class="text-center" span="3"><Checkbox></Checkbox></i-col>
            <i-col class="text-center" span="3"><Checkbox></Checkbox></i-col>
          </Row>
          <Row class="title-row-item">
            <i-col class="notification-name" span="9">Send clock in reminder at</i-col>
            <i-col span="9">
              <Input type="text" style="width: 82px;height: 30px"></Input>
              <Select style="width: 82px;height: 30px" v-model="model2">
                <Option value="1">am</Option>
                <Option value="1">pm</Option>
              </Select>
            </i-col>
            <i-col class="text-center" span="3"><Checkbox></Checkbox></i-col>
            <i-col class="text-center" span="3"><Checkbox></Checkbox></i-col>
          </Row>
          <Row class="title-row-item">
            <i-col class="notification-name" span="9">For these days</i-col>
            <i-col class="text-center" span="15">
            </i-col>
          </Row>
        </div>
        <div class="time-zoom-setting">
          <Row  class="title-row ">
            <i-col class="name" span="18">Time Zone Setting</i-col>
          </Row>
          <Row class="title-row-item">
            <i-col span="18">
              <Select v-model="model2">
                <Option value="1">am</Option>
                <Option value="1">pm</Option>
              </Select>
            </i-col>
          </Row>
        </div>
        <div class="in-out-setting">
          <Row class="title-row">
            <i-col class="name" span="18">Clock in/out setting</i-col>
          </Row>
          <Row class="title-row-item">
            <i-col span="18">
              <Checkbox class="in-out-checkbox"  v-model="single">Sign out after clock in/out</Checkbox>
            </i-col>
          </Row>
        </div>
        <div class="handle-group">
          <button class="default" type="button">Use Default</button>
          <button class="cancel" type="button">Cancel</button>
          <button class="save" type="button">Save</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { directive as onClickAway } from 'vue-clickaway';
  import amImg  from 'src/assets/images/am.png'
  import pmImg  from 'src/assets/images/pm.png'
  export default {
    name: 'TimeCard',
    directives: {
      onClickAway: onClickAway,
    },
    components:{

    },
    created(){
      this.init();

    },
    computed:{
      timeTrackData(){
        return this.$store.getters.timeTrackData
      },
      breakList(){
        return this.$store.getters.manualBreaks
      },
    },
    watch:{
      timeTrackData(value,old){
        this.currentTime = value.datetime;
        this.timeZone = value.timezone || '';
        this.location = value.location || '';
        this.clockState = value.status;
        this.lastClockInTime = value.clocked;
        this.currentTotal = value.current;
        this.dayTotal = value.day;
        this.weekTotal = value.week;
        /*break*/
        if(value.break){
          this.breakObj.id = value.break.id;
          this.breakObj.breakName = value.break.breakName;
          this.breakObj.isAutoEnd = value.break.isAutoEnd;
          this.breakObj.isEndEarly = value.break.isEndEarly;
          this.breakObj.running =  value.break.running || 0;
          this.breakObj.timeLength = value.break.timeLength;
          this.breakObj.timeUnit = value.break.timeUnit || '';
        }
      },
      'breakObj.timeLength'(value){
        this.autoBreakRemainTime =  value
      },
      clockState(value){
          if(value == 0){
            this.intervalFun = function () {

            }
          }else if(value == 1){
          this.intervalFun = function () {
            this.currentTime = moment(this.currentTime).add(1,'s');
            this.currentTotal ++;
            this.dayTotal ++;
            this.weekTotal ++;
          }
        }else if(value == 2){
          this.intervalFun = function () {
            if(!this.breakObj.isAutoEnd){
              this.breakObj.running ++;
            }else{
              this.autoBreakRemainTime --;
              this.autoBreakTime ++ ;
            }
          }
        }

      }
    },
    data () {
      return {
      	amImg,
        pmImg,
        interval:null,//定时器,
        intervalFun:function () {},
        currentTime:'', //当前时间 time,day,date
        location:'', //位置
        timeZone:'', //时区
        clockState: '0', //打卡状态 0,1,2
        lastClockInTime:'', //上次打卡时间,
        currentTotal:'',//当次累计时长，
        dayTotal:'',//当天累计时长，
        weekTotal:'',//当周累计时长，
        breakObj:{
          id: null,
          breakName:null,
          isAutoEnd: null,
          isEndEarly: null,
          running: 0,
          timeLength: null,
          timeUnit:''
        },//休息对象
        autoBreakTime:0,//自动休息计时
        autoBreakRemainTime:0,//自动休息倒计时
        showSetting:false,
        showBreakType:false,
      }
    },
    methods: {
      init(){
      	this.getTimeTrack();
        this.startTimeInterval();
      },
      getTimeTrack(){
        this.$store.dispatch('getTimeTrack')
      },
      formatTime(value,format){
      	if(!value){
      		return null;
        }
      	return moment(value).format(format);
      },
      isAm(date){
      	if(!date){
      		return;
        };
      	var hours = new Date(date).getHours();
        return hours>=6&&hours<18;
      },
      formatTimeLength(value,type){
      	if(!value){
      		return "";
        }
        return type == 1?value +' minutes':value +' hours'
      },
      formatTotal(value,format){
        if(isNaN(value)){
          return null;
        }
      	var hour = parseInt(value / 3600);
      	hour = hour < 10 ? '0' + hour : hour;
      	var min = parseInt(value % 3600 / 60);
        min = min < 10 ? '0' + min : min;
        var sec = parseInt(value % 3600 % 60);
        sec =  sec< 10 ? '0' + sec : sec;
      	if(format == 'hh:mm:ss'){
          return hour +':' + min +':' + sec;
        }else if(format == 'hh:mm'){
      		return hour +':' + min;
        }
      },
      formatBreakTime(value){
        if(isNaN(value)){
          return null;
        }
        var hour = parseInt(value / 3600);
        hour = hour == 0 ?'': hour < 10 ? '0' + hour +':' : hour + ':';
        var min = parseInt(value % 3600 / 60);
        min = min < 10 ? '0' + min + ":" : min +':';
        var sec = parseInt(value % 3600 % 60);
        sec =  sec< 10 ? '0' + sec : sec;
        return hour + min  + sec;
      },
      startTimeInterval(){
      	var t = this;
        clearInterval(t.interval);
        t.interval = setInterval(()=> {
          t.intervalFun();
        },1000);
      },
      takeBreak(){
        this.$store.dispatch('getManualBreaks',{employeeId:14}).then(
          ()=>{this.showBreakType = true;}
        );
      },
      /**
       * 激活某条break
       */
      activeBreakItem(breakItem){
        var id = breakItem.breakRuleId;
        this.breakObj.id = breakItem.breakRuleId;
        this.breakObj.breakName = breakItem.breakName;
        this.breakObj.isAutoEnd = breakItem.autoEndBreak;
        this.breakObj.isEndEarly = breakItem.earlyEnd;
        this.breakObj.running =  breakItem.running || 0;
        this.breakObj.timeLength = breakItem.timeLength;
        this.breakObj.timeUnit = breakItem.timeUnit;

        this.$store.dispatch('breakStart',{id:id}).then(
          () =>{
            this.showBreakType = false;
            this.clockState = 2;
          }
        );
      },
      endBreak(){
        var id = this.breakObj.id;
        this.$store.dispatch('breakEnd',{id:id}).then(
          () =>{
            this.clockState = 0;
            this.manualBreakTime = 0;
            this.getTimeTrack();
          }
        );
      },
      clockIn(){
        this.$store.dispatch('clockIn').then(() =>  {
          this.clockState = 1;
          this.getTimeTrack();
        });
      },
      clockOut(){
        this.$store.dispatch('clockOut').then(() => {
          this.clockState = 0;
          this.getTimeTrack();
        });
      },
      closeBreakType(){
      	if(this.showBreakType){
          this.showBreakType = false;
        }
      }
    }
  }
</script>


<style  rel="stylesheet/scss" type="text/css" lang="scss" scoped >
  @import "src/assets/css/variable.scss";
  $breakColor:#FF7123;
  .time-card{
    position: relative;
    >.title{
      padding-left: 120px;
    }
    .card-content{
      padding:  0 120px;
      .left-wrapper{
        position: relative;
        width: 450px;
        height: 300px;
      }
      .card{
        display: inline-block;
        box-sizing: border-box;
        width: 450px;
        height: 300px;
        box-shadow: 0 2px 8px 0 rgba(184,198,239,0.80);
        border-radius: 4px;
        &.left-card{
          position: absolute;
          left: 0;
          right: 0;
          top:0;
          bottom: 0;
          padding: 17px 22px 21px 22px;
          .image-wrapper{
            position: absolute;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
          }
          >.time-zoom{
            height: 25px;
            line-height: 25px;
            margin-bottom: 21px;
            >.time-zoom-icon{
              margin-right: 10px;
              font-size: 20px;
              color: rgba(255,255,255,.7);
              vertical-align: middle;
            }
            >.time-zoom-name{
              opacity: 0.7;
              /*font-family: PingFangTC-Regular;*/
              font-size: 18px;
              color: #FFFFFF;
            }
          }
          >.time-show{
            margin-bottom: 56px;
            color: #fff;
            >.time-current{
              width: 174px;
              height: 88px;
              line-height: 88px;
              margin: 0 auto;
             /* font-family: PingFangTC-Thin;*/
              font-size: 72px;
            }
            >.date-current{
              width: 174px;
              margin: 0 auto;
             /* font-family: PingFangTC-Regular;*/
              font-size: 16px;
              >.date{
                float: left;
              }
              >.day{
                float: right;
              }
            }
          }
          >.time-location{
            /*font-family: PingFangTC-Regular;*/
            font-size: 18px;
            color: #325570;
            line-height: 69px;
            >.time-location-icon{
              font-size: 28px;
              color: $baseColor;
              margin-right: 16px;
            }
          }
        }
        &.right-card{
          position: relative;
          background-color: #fff;
          >.title{
            height: 48px;
            line-height: 48px;
            /*font-family: PingFangTC-Regular;*/
            font-size: 20px;
            color: #FFFFFF;
            text-align: center;
            background-color: $baseColor;
            border-radius: 4px 4px 0 0;
            .setting-icon{
              float: right;
              font-size: 26px;
              color: #fff;
              padding-right: 20px;
            }
            &.break{
              background-color: $breakColor;
            }
          }
          >.content{
            .clock-record{
              position: relative;
              box-sizing: border-box;
              width: 100%;
              height: 60px;
              line-height: 60px;
              padding-left: 34px;
              /*font-family: PingFangTC-Regular;*/
              font-size: 18px;
              color: #325570;
              letter-spacing: 0;
              text-align: left;
              .time{
                color: $baseColor;
                font-weight: bold;
              }
              &:before{
                content: '';
                position: relative;
                display: inline-block;
                width: 8px;
                height: 8px;
                margin-right: 16px;
                border-radius: 50%;
                background-color: $baseColor;
                vertical-align: middle;
              }
            }
            .total-record{
              width: 100%;
              width: 414px;
              height: 100px;
              margin: 0 auto;
              text-align: center;
              color: $baseColor;
              background: #F2F9FF;
              border-radius: 2px;
              padding: 10px 0;
              .key{
                font-size: 16px;
                line-height: 34px;
              }
              .value{
                font-size: 24px;
                line-height: 46px;
              }
            }
          }
          >.footer{
            text-align: center;
            .break-button-icon{
              position: relative;
              .break-icon{
                position: absolute;
                top:15px;
                right: 10px;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
                &:hover{
                  color: #2a8eff;
                }
              }
            }
            button{
              width: 100%;
              height: 38px;
              margin: 20px auto;
              border: none;
              border-radius: 4px;
              font-size: 16px;
              font-weight: bold;
              color: #fff;
              cursor: pointer;
              &:hover{
                opacity: .7;
              }
              &.break-button{
                background-color: rgb(141, 211, 45);
              }
              &.clock-in-button{
                background-color: $baseColor;
              }
              &.clock-out-button{
                background-color: rgb(255, 153, 0);
              }
            }
          }
        }

        /*break  */
        .card-dialog{
          position: absolute;
          left: 0;
          right: 0;
          top:0;
          bottom: 0;
          background-color: rgba(255,255,255,.1);
          .card-dialog-content{
            position: absolute;
            top:25px;
            left: 80px;
            width: 299px;
            height: 275px;
            background: #FFFFFF;
            border: 1px solid #DEE7EB;
            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
            border-radius: 4px;
          }
        }
        .break-list{
          padding: 19px 22px;
          text-align: left;
          >.title{
           /* font-family: PingFangTC-Medium;*/
            font-size: 20px;
            color: #325570;
            margin-bottom: 24px;
          }
          >.list{
            height: 200px;
            overflow: auto;
            >.item{
              display: flex;
              margin-bottom: 12px;
              border-bottom: 1px $baseBorderColor solid ;
              cursor: pointer;
              &:last-child{
                border: 0;
                margin-bottom:0;
              }
              &:hover{
                opacity: .7;
              }
              >.left-item{
                flex: 3;
                /*font-family: PingFangTC-Regular;*/
                font-size: 14px;
                color: #325570;
                >.name{
                  line-height: 20px;
                  margin-bottom: 4px;
                }
                >.time{
                  color: #96ACB9;
                  margin-bottom: 12px;
                }
              }
              >.right-item{
                flex: 1;
                .paid-name{
                  display: inline-block;
                  width: 52px;
                  height: 22px;
                  text-align: center;
                  border-radius: 3px;
                  color: #fff;
                  &.paid-type{
                    background: $baseColor;
                  }
                  &.unpaid-type{
                    background: #FE7022;
                  }
                }
              }
            }
          }
        }

        /*break item*/
        .break-item{
          padding-top: 55px;
          text-align: center;
          >.title{
            /*font-family: PingFangTC-Medium;*/
            font-size: 20px;
            color: #325570;
            line-height: 28px;
            margin-bottom: 10px;
          }
          >.content{
            .total-time{
              height: 28px;
              line-height: 28px;
              font-size: 20px;
              color: #009AFF;
              margin-bottom: 6px;
            }
            .break-interval{
              height: 20px;
              line-height: 20px;
              font-size: 18px;
              color: #009AFF;
              margin-bottom: 30px;
              &.auto-end{
                height: auto;
                font-size: 36px;
                line-height: 50px;
                margin-bottom: 15px;
              }

            }
            .end-button-content{
              .end-button{
                width: 140px;
                height: 38px;
                font-size: 16px;
                color: #FFFFFF;
                outline: none;
                border: 0;
                background: $breakColor;
                border-radius: 4px;
                cursor: pointer;
                &:hover{
                  opacity: .7;
                }
              }
            }
            .auto-end-name-time{
              font-size: 18px;
              color: #325570;
            }
          }
        }

      }
    }
    /*设置界面*/
    .time-card-setting{
      .time-card-setting-content{
        position: absolute;
        box-sizing: border-box;
        right: 90px;
        top: 140px;
        width: 610px;
        height: 660px;
        padding: 38px 52px;
        background: #FFFFFF;
        border: 1px solid #DEE7EB;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        z-index: 100;
        .close-icon{
          position: absolute;
          top:22px;
          right: 22px;
          font-size: 14px;
          color:#B9C0C6;
          &:hover{
            opacity: .5;
          }
        }
        >.title{
         /* font-family: PingFangTC-Medium;*/
          font-size: 20px;
          color: #325570;
          margin-bottom: 30px;
        }
        .title-row{
          padding-bottom: 12px;
          border-bottom: 1px  #DEE7EB solid;
          >.name{
          /*  font-family: PingFangTC-Regular;*/
            font-size: 14px;
            color: #325570;
          }
          >.mobile,>.email{
            /*font-family: PingFangTC-Regular;*/
            font-size: 12px;
            color: #325570;
          }
          .iconfont{
            font-size: 12px;
            vertical-align: middle;
            color: #325570;
          }
          .mobile-icon{
            font-size: 14px;
            margin-left: 2px;
          }
          .email-icon{
            font-size: 12px;
            margin-left: 4px;
          }
        }
        .title-row-item{
          margin: 20px 0;
          line-height: 34px;
          .notification-name{
           /* font-family: PingFangTC-Regular;*/
            font-size: 14px;
            color: #96ACB9;
          }
        }
        .in-out-setting{
          .in-out-checkbox {
            /*font-family: PingFangTC-Regular;*/
            font-size: 14px;
            color: #325570;
          }
        }
        .handle-group{
          margin: 50px auto;
          text-align: center;
          button{
            box-sizing: border-box;
            width: 100px;
            height: 38px;
            border: 1px solid #DEE7EB;
            border-radius: 4px;
            background-color: #fff;
            margin: 0 12px;
            /*font-family: PingFangTC-Regular;*/
            font-size: 16px;
            color: #96ACB9;
            outline:none;
            cursor: pointer;
            &:hover{
              opacity: .8;
            }
            &.save{
              background-color: $baseColor;
              color: #fff;
            }
          }
        }
      }
      >.bg{
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.01);
        z-index:99;
      }
    }
  }
</style>
